<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-select v-model="input.connect" filterable clearable placeholder="选择连接" size="small" @change="switchConnection">
          <el-option
            v-for="connection in connections"
            :key="connection"
            :label="connection"
            :value="connection"
          />
        </el-select>

        <el-select v-model="input.catalog" class="margin-left" filterable clearable placeholder="选择库" size="small" @change="switchCatalog">
          <el-option
            v-for="catalogMeta in catalogs"
            :key="catalogMeta.catalog"
            :label="catalogMeta.catalog"
            :value="catalogMeta.catalog"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row v-if="schemas && schemas.length > 0">
      <el-col :span="24">
        <div class=" padding-top text-forestgreen">当前 schema 数量: {{ schemas.length }} </div>
        <el-radio-group v-model="input.schema" @change="datasourceChange">
          <el-radio-button v-for="schema in schemas" :key="schema" size="small" :value="schema" :label="schema" />
        </el-radio-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import database from '../../api/database'

export default {
  name: 'ChoseDatasource',
  props: {
    connect: String,
    catalog: String
  },
  data() {
    return {
      input: {
        connect: null,
        catalog: null,
        schema: null
      },
      schemas: [],
      catalogs: [],
      connections: []
    }
  },
  mounted() {
    this.refreshConnect()
    if (this.connect) {

    }
  },
  methods: {
    datasourceChange() {
      this.$emit('change', this.input)
    },
    switchConnection(value) {
      this.input.connect = value
      // 获取当前连接信息
      if (value) {
        database.catalogs(value).then(res => {
          this.catalogs = res.data
          if (res.data && res.data.length > 0) {
            if (this.catalog) {
              this.switchCatalog(this.catalog)
            } else {
              this.switchCatalog(res.data[0].catalog)
            }
          }
        })
      }
    },
    switchCatalog(catalog) {
      this.input.catalog = catalog
      this.datasourceChange()
      // 加载当前 catalog 的 schemas
      if (this.catalogs) {
        const currentCatalogFilter = this.catalogs.filter(item => item.catalog === catalog)
        if (currentCatalogFilter && currentCatalogFilter.length > 0) {
          this.schemas = currentCatalogFilter[0].schemas

          // 加载第一个 schema
          if(this.schemas && this.schemas.length > 0){
            this.input.schema = this.schemas[0];
            this.datasourceChange()
          }
        }
      }
    },
    refreshConnect() {
      database.connections().then(res => {
        this.connections = res.data
        if (res.data && res.data.length > 0) {
          console.log(this.connect, 'connect')
          if (this.connect) {
            this.switchConnection(this.connect)
          } else {
            this.switchConnection(res.data[0])
          }
        }
      })
    }
  }
}
</script>


